<template>
     <div class='solution-detail'>
        <public-head>
            <span>解决方案详情</span>
        </public-head>
         <div class="content">
            <div class="head">
                <h2 class="title">{{ solution_detail.title }}</h2>
            </div>
            <div class="container" v-html="solution_detail.content">
                
            </div>
        </div>
        <loading v-if="is_loading"></loading>
     </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
     export default {
        data() {
            return{
                solution_detail:{} // 解决方案详情
            }
        },
        created() {
            this.isLoading(true)
            this.axios.post(root + '/api/industry/solveDetail',{id: this.$route.params.id}).then((res)=>{
                this.isLoading(false)
                this.solution_detail = res.data.data
            })
        },
        methods:{
            ...mapActions(['isLoading'])
        },
        computed:{
            ...mapState(['is_loading'])
        }
     }
</script>

<style lang="less">
@import '../../../common/style/mixin.less';
.solution-detail {
    height: 100%;
    background: #fff;
    .content {
        padding: .35rem .3rem;
        .bor1pxTop;
        .head {
            padding-bottom: 0.35rem;
            .title {
                .ft(.28rem);
                .tc;
                color: #222;
                font-weight: 700;
            }
        }
        .container {
            .bor1pxTop;
            padding-top:.15rem;
            p {
                .ft(.26rem);
                line-height:.44rem; 
                color: #404040;
                text-indent: 2em;
            }
            img{
                display: block;
                max-width: 100%;
                margin:.2rem 0;
            }
        }
    }
}
</style>